Skip to content

chore(deps): update dependency @testing-library/user-event#7840

Merged
tlabaj merged 14 commits into
patternfly:mainfrom
wise-king-sullyman:update-user-event
Sep 2, 2022
Merged

chore(deps): update dependency @testing-library/user-event#7840
tlabaj merged 14 commits into
patternfly:mainfrom
wise-king-sullyman:update-user-event

Conversation

@wise-king-sullyman
Copy link
Copy Markdown
Collaborator

@wise-king-sullyman wise-king-sullyman commented Aug 16, 2022

What: Closes #7839

Additional issues:

Breaking changes introduced in the newer release are listed here: https://github.com/testing-library/user-event/releases/tag/v14.0.0

One additional change I made in this PR that isn't technically breaking is the addition of userEvent.setup(), because the RTL team has stated that is the preferred way to use userEvent going forward here: https://testing-library.com/docs/user-event/intro#writing-tests-with-userevent

@patternfly-build
Copy link
Copy Markdown
Collaborator

patternfly-build commented Aug 16, 2022

@wise-king-sullyman wise-king-sullyman marked this pull request as ready for review August 16, 2022 19:59
Copy link
Copy Markdown
Contributor

@kmcfaul kmcfaul left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm. Though there would be conflicts with other open test update PRs with this - should we merge this one first?

userEvent.type(screen.getByRole('dialog'), '{esc}');
expect(props.onClose).toHaveBeenCalled();
await user.type(screen.getByRole('dialog'), '{Escape}');
waitFor(() => expect(props.onClose).toHaveBeenCalled());
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

waitFor returns a promise which should be awaited. There are several other waitFor usages in this change that should be awaited as well.

@wise-king-sullyman
Copy link
Copy Markdown
Collaborator Author

@kmcfaul we could, though I think it might make more sense to delay the merging of this until the start of the next milestone.

I don't mind resolving the conflicts and making the updates needed on this PR, and I wouldn't want to delay all of the other test-changing PRs and potentially delay code freeze.

I'm definitely open to alternative approaches though, if you think it would be better to go ahead and merge this sooner rather than later I won't object.

@wise-king-sullyman
Copy link
Copy Markdown
Collaborator Author

I'm reverting this to a draft as I've found some issues with tests that shouldn't be passing.

@wise-king-sullyman wise-king-sullyman marked this pull request as draft August 18, 2022 12:54
@wise-king-sullyman wise-king-sullyman marked this pull request as ready for review August 26, 2022 15:09
@wise-king-sullyman
Copy link
Copy Markdown
Collaborator Author

wise-king-sullyman commented Aug 26, 2022

Biggest changes since the first time I put this up as ready for review:

I had to replace our usage of event.keyCode with event.key as user-event dropped support for .keyCode in its keyboard events. This also meant updating our integration tests to match, as they previously sent .keyCode based events. I used .type where possible rather than .trigger to not tie us down to one particular event format going forward, but .type is not usable with all keys at the moment, and it seemed to cause errors in a couple of places.

In some of the DropDown integration tests (in 1a2dc60) I also had to add an additional click at the start of the test to open the dropdown so that shift+tab could be used to close it, I'm actually not sure why it was passing before and think it might have been a false pass on the tests preceding them.

Other small changes needed were changing special keys in userEvent.type/.keyboard to match their new API for those keys.


await user.click(input);

// fireEvent is used here do to an issue with the current version userEvent
Copy link
Copy Markdown
Contributor

@jpuzz0 jpuzz0 Sep 1, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

due* to an issue (same as other instances of this comment).

Is there a github issue we can link here pointing to the issue or can the issue be described here in more detail?

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No github issue that I'm aware of, a test just started failing all of a sudden in a release version that shouldn't have been breaking. I'll explain some of that in the comment and fix the due/do flub in just a moment.

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also I'll rebase once more and fix the merge conflict

render(<AboutModal {...props} isOpen />);

userEvent.type(screen.getByRole('dialog'), '{esc}');
await user.type(screen.getByRole('dialog'), '{Escape}');
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are strings like Escape here something we should be using enums or constants for? So that we don't have to update all these values ever again? And can reuse them in the future? just an idea.


onEnterPressed = (event: any) => {
if (event.charCode === KEY_CODES.ENTER) {
if (event.key === KeyTypes.Enter) {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh - maybe this is the constant I was imagining. Could we uses these/expand these everywhere you have hardcoded KeyTypes?

Copy link
Copy Markdown
Collaborator Author

@wise-king-sullyman wise-king-sullyman Sep 1, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah I really like that idea!

Since RTL requires those {} around the actual key value though I would either need to either place the KeyTypes value in a template string each time they're used or create a new constant for RTL keys which does so, which approach do you think would be better?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if the use of the template string means that we'd have one 'gold source' for key values, then I think it'd opt for that.

Copy link
Copy Markdown
Contributor

@nicolethoen nicolethoen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

Copy link
Copy Markdown
Contributor

@tlabaj tlabaj left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good. I opened a follow up breaking change issue.
#7929

@tlabaj tlabaj merged commit 3b1df2c into patternfly:main Sep 2, 2022
@wise-king-sullyman wise-king-sullyman deleted the update-user-event branch September 2, 2022 17:37
andyyvo pushed a commit to andyyvo/patternfly-react that referenced this pull request Sep 9, 2022
…y#7840)

* chore(deps): update dependency @testing-library/user-event

* fix AboutModal

* fix Modal

* fix other breaking changes

* await transformers test helper assertion

* update key press events

* further transition from using .keyCode to .key

* fix dropdown integration tests

* revert some usage of .trigger to .type

* rebase

* resolve failing test in user-event v14.4.3

* improve fireEvent  usage explanation

* update tests to use KeyTypes constant

* add missed KeyTypes
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Update @testing-library/user-event

7 participants